<template>
  <div>
    <div class="top flex">
      <div>
        <span class="font-bold">收藏的歌手</span>
        ({{ subCount }})
      </div>
      <div>
        <el-input
          placeholder="搜索收藏专辑"
          clearable
          suffix-icon="el-icon-search"
          v-model="key"
        ></el-input>
      </div>
    </div>
    <div class="main-list">
      <!-- 歌手 -->
      <album-list :list="subSinger">
        <template #item2="{item}">
          {{ item.name }}
        </template>
        <template #item3="{item}">
          专辑数: {{ item.albumSize }}
        </template>
        <!-- 作用域插槽两种写法,带花括号的应该是解构赋值玩法 -->
        <template #item4="scope">
          MV数: {{ scope.item.mvSize }}
        </template>
      </album-list>

    </div>
  </div>

</template>

<script>
import { getSubSinger } from '@/api/singer.js'
import albumList from '@/components/Album/albumList.vue'

export default {
  data () {
    return {
      // 收藏数量
      subCount: 0,
      subSinger: [],
      // 搜索框的值
      key: ''
    }
  },
  created () {
    this.showSubSinger()
  },
  methods: {
    // 展示收藏歌手
    async showSubSinger () {
      const res = await getSubSinger()
      if (res.data.code !== 200) return this.$message.error('获取收藏歌手失败')
      this.subSinger = res.data.data
      this.subCount = res.data.count
      console.log(res)
    }
  },
  components: {
    albumList
  }
}
</script>

<style lang="less" scoped>
.top {
  justify-content: space-between;
  padding: 0 40px;
  align-items: center;
}
</style>
